import React from 'react';
import { connect } from 'react-redux';
import { hashHistory } from 'react-router';

import HeaderBar from '../components/headerbar';
import Articles from '../components/articles';
import Loadmore from '../components/loadmore';
import { switchChannel, loadMoreArticle, initArticles } from '../actions/home';

class ArticlesPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            channel: this.props.params.channel,
            sort: this.props.params.sort
        }
    }

    componentDidMount() {
        if (this.props.params.page+'' === '1' && this.props.params.sort+'' === '0') {
            this.props.initArticles();
        }
        this.props.switchChannel(this.props.params.channel, this.props.params.page, this.props.params.sort);
    }

    menuHandler(id) {
        this.setState({
            channel: id,
            sort: "0"
        });
        this.props.initArticles();
        this.props.switchChannel(id, 1, 0);
        hashHistory.push('articles/'+id+'/1/0');
    	var leftMenu = $("#leftBar");
        var sidebar = $(".sidebar");
    	sidebar.removeClass("fa-arrow-left").addClass("fa-arrow-right");
    		$("#rightBar").hide();
    		leftMenu.hide();
    }

    sortHandler(id) {
        this.setState({
            sort: id
        });
        this.props.switchChannel(this.state.channel, 1, id);
        hashHistory.push('articles/'+this.state.channel+'/1/'+id);
    }

    handleLoad(page) {
        this.props.loadMoreArticle(this.props.params.channel, page, 0);
        hashHistory.push('articles/'+this.state.channel+'/'+ page +'/'+0);
        window.scrollTo(0,0);
    }

    render() {
        let channel = 0;
        if (this.state.channel !== undefined) {
            channel = this.state.channel;
        } 

        let channels = [];
        if (this.props.channels !== undefined) {
            channels = this.props.channels;
        } else if (sessionStorage.channels !== undefined) {
            channels = JSON.parse(sessionStorage.channels);
        }

        let articles = [];
        let articleDiv = (<div></div>);
        if (this.props.articles !== undefined && this.props.articles.length > 0) {
            articles = this.props.articles;
            articleDiv = (<Articles channels={channels} articles={articles}/>)
        } 
        
        return(
            <div>
                <HeaderBar isSearch={this.state.channel} sort={ this.state.sort } channel={channel} channels={channels} menuHandler={this.menuHandler.bind(this)} sortHandler={this.sortHandler.bind(this)}/>
                { articleDiv }
                { articles.length > 0 && <Loadmore page={this.props.page} defaultPageSize={articles.length} pageCount={(articles.length * this.props.pageCount)} handleLoad={this.handleLoad.bind(this)} pageChange={this.handleLoad.bind(this)}/>}
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        channels: state.home.channels,
        articles: state.home.articles,
        pageCount: state.home.pageCount,
        page: state.home.page
    };
}

export default connect(mapStateToProps, { switchChannel, loadMoreArticle, initArticles })(ArticlesPage);